<template>
  <div class='container'>
    <el-form @submit.native.prevent>
      <!-- 设置基本信息 -->
      <div class='top-basic'>
        <p>设置基本信息</p>
        <div>
          <span class='remake-name'>商品名称</span>
          <el-input size="medium" style='width:200px' placeholder="请输入商品名称" v-model='dataTable.babyGood' onkeyup="this.value=this.value.replace(/\s+/g,'')" clearable></el-input>
          <span class='remake-name'>商品链接</span>
          <el-input size="medium" style='width:200px' placeholder="请输入商品链接" v-model='dataTable.goodLink' onkeyup="this.value=this.value.replace(/\s+/g,'')" clearable></el-input>
        </div>
        <div class='middle-input'>
          <span class='remake-name'>商品单价</span>
          <el-input size="medium" style='width:200px' placeholder="请输入商品单价" v-model='dataTable.goodPrice' onkeyup="this.value=this.value.toString().match(/^\d+(?:\.\d{0,2})?/)" clearable></el-input>
          <span class='remake-name'>商品ID</span>
          <el-input size="medium" style='width:200px' placeholder="请输入商品ID" onkeyup="this.value=this.value.replace(/\s+/g,'')" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model='dataTable.babyId' clearable></el-input>
          <span class='remake-name'>活动执行日期</span>
          <el-date-picker v-model="dataTable.taskTime" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class='upload-img'>
          <span class='remake-name'>活动图片</span>
          <el-upload
            :limit='1'
            class="upload-demo"
            action="api/upload/upload"
            :on-remove="handleRemove"
            :on-success='onSuccess'
            :on-exceed="handleExceed"
             :before-upload="beforeAvatarUpload"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
      <!-- 评价信息 -->
      <div class='assessing-info' v-if='show'>
        <p>评价信息</p>
        <div>
          <span>当前评价图片数量共{{allImg}}张</span>
          <el-button type="primary" @click="dialogFormVisible = true">点击上传评价图片</el-button>
        </div>
      </div>
      <!-- 弹框中的添加评论以及展示评论 -->
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form :model='commentData' :rules='rules' ref='commentData'>
          <el-form-item label='评论文字' label-width="100px" prop='evaluateContent'>
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入指定评论" onkeyup="this.value=this.value.replace(/\s+/g,'')" v-model="commentData.evaluateContent">
            </el-input>
          </el-form-item>
          <el-form-item label='活动图片' label-width="100px">
            <div class='upload-img'>
              <el-upload :limit="5" :before-upload="beforeAvatarUpload" :headers="{'Content-Type': 'multipart/form-data'}" :on-success="succ" :on-remove='remove' :on-exceed='exceedFive' :multiple="true" ref="fileUpload" :http-request="mulpitleUpload" :auto-upload="false" action="api/upload/upload" list-type="picture-card" accept=".jpg, .png,image/gif,image/bmp" :on-preview="handlePictureCardPreview">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </div>
          </el-form-item>
          <el-form-item>
            <div class='add-comment'>
              <el-button type="primary" @click="addComment('commentData')">添加评论</el-button>
            </div>
          </el-form-item>
        </el-form>
        <el-table :data="getCommentList" height="250" border style="width: 100%">
          <el-table-column prop="created_time" label="添加日期" width="130">
          </el-table-column>
          <el-table-column prop="content" label="文字">
          </el-table-column>
          <el-table-column label="缩略图">
            <template slot-scope="scope">
              <div class='table-img-size'>
                <div v-for='(item,index) in scope.row.img_url' :key='index'>
                     <img :src="item.img" alt="">
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="上传评价" width='110'>
            <template slot-scope="scope">
              <el-switch v-model="scope.row.state" active-color="#13ce66">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width='110'>
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmUpload">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 设置活动信息-->
      <div class='middle-act'>
        <div class='first-colmun'>
          <p>设置活动信息</p>
          <ul class='count-num'>
            <li>总单数：{{zd()}}</li>
            <li>总本金：{{bj()}}</li>
            <li>总佣金：{{yj()}}</li>
            <li>总支付金额：{{ze()}}</li>
          </ul>
        </div>
        <!-- 可增加可删除的数据-->
        <div class='rep-add' v-for='(domain,index) in dataTable.task' :key='index'>
          <div v-if='domain.mold==3?false:true'>
            <div class='search-key'>
              <span>
                <span>搜索关键词</span>
                <el-input size="medium" style='width:500px' placeholder="请输入搜索商品的关键词" onkeyup="this.value=this.value.replace(/\s+/g,'')" v-model='domain.keyword' clearable></el-input>
              </span>
              <span>排序方式</span>
              <el-radio-group v-model="domain.search1">
                <el-radio :label="1">综合</el-radio>
                <el-radio :label="2">销量</el-radio>
              </el-radio-group>
              <img src="@/images/tuichu.png" alt="" @click='isDelete(domain)' v-if='Number(dataTable.task.length)==1?false:true'>
            </div>
            <div class='search-list'>
              <span>筛选方式</span>
              <el-radio-group v-model="domain.search2">
                <el-radio :label="1">货到付款</el-radio>
                <el-radio :label="2">公益宝贝</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class='antistop' v-else>
            <span>关键词淘口令</span>
            <el-input size="medium" style='width:200px' placeholder="请输入关键词淘口令" onkeyup="this.value=this.value.replace(/\s+/g,'')" v-model='domain.keyword' clearable></el-input>
            <img src="@/images/tuichu.png" alt="" @click='isDelete(domain)' v-if='Number(dataTable.task.length)==1?false:true'>
          </div>
          <div class='value-add'>
            <span>增值服务</span>
            <template>
              <!-- 就这样啊-->
              <el-checkbox-group v-model="domain.value_added">
                <el-checkbox label="1">货比三家</el-checkbox>
                <el-checkbox label="2">收藏浏览</el-checkbox>
              </el-checkbox-group>
            </template>
            <!-- <el-checkbox v-model="checked1">货比三家</el-checkbox> -->
            <!-- <el-checkbox v-model="checked2">收藏浏览</el-checkbox> -->
          </div>
          <div class='act-type'>
            <span>选择活动类型</span>
            <el-radio-group v-model="domain.mold">
              <el-radio :label="1">原价单</el-radio>
              <el-radio :label="2">评价单</el-radio>
              <el-radio :label="3">淘宝优惠券单</el-radio>
            </el-radio-group>
          </div>
          <div class='new-password' v-if='domain.mold==3'>
            <span>优惠券淘口令</span>
            <el-input size="medium" style='width:200px' placeholder="请输入商品淘口令" onkeyup="this.value=this.value.replace(/\s+/g,'')" v-model='domain.coupon' clearable></el-input>
            <span>使用优惠券后支付价格</span>
            <el-input size="medium" style='width:100px' v-model='domain.coupon_money' onkeyup="this.value=this.value.replace(/\s+/g,'')" clearable></el-input>
            <span>元</span>
          </div>
          <div class='table-part'>
            <div class='data-display'>
              <p>活动执行时间：</p>
              <ul>
                <li v-if='domain.mold==3'>使用优惠券后支付金额：{{domain.num.toFixed(2)}}</li>
                <li v-else>本金：{{domain.num.toFixed(2)}}</li>
                <li>佣金：{{domain.yj}}</li>
                <li>
                  <!-- <el-checkbox v-model="domain.insurance" true-label='1' false-label='0'>保险：{{domain.insurancePrice || 0}}</el-checkbox> -->
                  <el-checkbox v-model="domain.insurance" true-label='1' false-label='0'>保险：{{domain.insurance==1?domain.insurancePrice:0}}</el-checkbox>
                </li>
                <li>总额：{{(+domain.num+domain.yj+domain.insurancePrice).toFixed(2)}}</li>
              </ul>
            </div>
            <table class='data-table' align='center'>
              <thead>
                <tr class='tr-top'>
                  <th>任务时间</th>
                  <td v-for='(item,index) in 16' :key='index'>{{index + 7 }}</td>
                </tr>
              </thead>
              <tbody>
                <tr class='tr-bottom'>
                  <th>任务数量</th>
                  <td v-for='(item,index) in domain.times' :key='index'>
                    <input v-model="item.value" type="text" onkeyup="this.value=this.value.replace(/\s+/g,'')" @input="item.value = item.value.replace(/[^\d]/g, '')">

                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class='search-keyword'>
          <el-button type='primary' v-on:click='addData'>点击添加关键词</el-button>
        </div>
      </div>
      <div class='footer-step'>
        <el-button type='primary' v-on:click='lastStep'>上一步</el-button>
        <el-button type='primary' v-on:click='nextStep'>下一步</el-button>
      </div>

      <!--  -->

      <!-- 遮罩层 -->
      <div class='layer' v-if='maskLayer'></div>
      <!-- 弹出框支付页面 -->
      <div class='pop-up-box' v-if='buyPage'>
        <div class='head-top'>
          <span>请核实活动信息</span>
          <img src="@/images/tuichu.png" alt="" class='quit' @click='returnEdit'>
        </div>
        <div class='center-center'>
          <div class='center-img'><img :src="dataList.img_link" alt=""></div>
          <ul class='center-word'>
            <li>商品名称：{{dataList.baby_good}}</li>
            <li>商品单价：{{dataList.good_price}}元</li>
            <li>店铺名称：{{dataList.shop_name}}</li>
            <li>排序方式：{{dataList.search1}}</li>
            <p class='buy-info'>请核实支付信息</p>
          </ul>
        </div>
        <el-table :data="dataList.task" style="width: 100%" :row-class-name="tableRowClassName" height='100'>
          <el-table-column prop="mold" label="活动类型" width="95">
          </el-table-column>
          <el-table-column prop="keyword" label="关键词" width="90">
          </el-table-column>
          <el-table-column prop="count" label="发单数" width="72">
          </el-table-column>
          <el-table-column prop="true_pay" label="本金" width="72">
          </el-table-column>
          <el-table-column prop="store_commission" label="佣金" width="72">
          </el-table-column>
          <el-table-column prop="insurance_money" label="保险" width="72">
          </el-table-column>
          <el-table-column prop="value_added_money" label="增值服务金" width="95">
          </el-table-column>
        </el-table>
        <div class='all-price'>
          支付总金额：{{allPrice}}元
        </div>
        <div class='editbutton'>
          <button @click='returnEdit'>返回修改</button>
          <button v-on:click='affirmPay'>确认支付</button>
        </div>
      </div>
      <!-- 弹出框中支付成功页面 -->
      <!-- <div class='buy-success' v-if='buySuccess'>
        <p>商家平台支付</p>
        <div class='center-main'>
          <img src="@/images/success.png" alt="">
          <span class='wish-success'>恭喜你！支付成功！</span>
          <p class='buydate'>支付时间：2018-11-13 13:17:15</p>
          <ul class='order-info'>
            <li>
              <span>订单号</span>
              <span>1034904323</span>
            </li>
            <li>
              <span>支付方式</span>
              <span>支付宝</span>
            </li>
            <li>
              <span>支付账号</span>
              <span>234390422</span>
            </li>
            <li>
              <span>支付方式</span>
              <span>￥2000.33</span>
            </li>
          </ul>
          <div class='order-btn'>
            <button>继续支付</button>
            <button @click='successTrue'>完成</button>
          </div>
        </div>
      </div> -->
    </el-form>
  </div>
</template>
<script src='./SetUpInfo.js'>

</script>
<style lang='scss' scoped>
@import "./SetUpInfo.scss";
</style>
